<template>
    <div>
        <el-form ref="ruleForm" :model="compensationContent" :rules="rules" size="medium" label-width="auto">
            <div class="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-6">
                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model.trim="compensationContent.projectName" maxlength="16" show-word-limit placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="预计赔付金额" prop="prepareAmount">
                    <el-input
                        v-model.trim.number="compensationContent.prepareAmount"
                        type="number"
                        placeholder="请输入"
                        clearable
                        oninput="if(value.length > 10) value = value.slice(0, 10)"
                    />
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model.trim="compensationContent.unit" placeholder="请输入" maxlength="4" show-word-limit clearable />
                </el-form-item>
                <el-form-item label="单价">
                    <el-input
                        v-model.trim.number="compensationContent.unitPrice"
                        type="number"
                        show-word-limit
                        placeholder="请输入"
                        clearable
                        oninput="if(value.length > 10) value = value.slice(0, 10)"
                    />
                </el-form-item>
                <el-form-item label="数量">
                    <el-input
                        v-model.trim.number="compensationContent.count"
                        type="number"
                        placeholder="请输入"
                        clearable
                        oninput="if(value.length > 10) value = value.slice(0, 10)"
                    />
                </el-form-item>
            </div>
            <el-form-item label="备注说明" class="flex-1">
                <el-input
                    v-model="compensationContent.remark"
                    clearable
                    style="width: 100%"
                    type="textarea"
                    maxlength="200"
                    show-word-limit
                    placeholder="请输入"
                    :autosize="{ minRows: 6, maxRows: 10 }"
                />
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { isNumberOrDecimals } from '@/utils/validate'
export default {
    props: {
        value: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            compensationContent: {},
            rules: {
                projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                prepareAmount: [
                    { required: true, message: '请输入赔付金额', trigger: 'blur' },
                    { type: 'number', min: 1, message: '必须大于0', trigger: 'blur' },
                    { required: true, validator: this.validNum, trigger: 'blur' }
                ],
                price: [{ required: true, validator: this.validNum, trigger: 'blur' }],
                number: [{ required: true, validator: this.validNum, trigger: 'blur' }]
            }
        }
    },
    watch: {
        compensationContent: {
            handler(newVal) {
                this.$emit('input', newVal)
            },
            deep: true
        },
        value: {
            handler(newval) {
                this.compensationContent = newval || {
                    projectName: null,
                    prepareAmount: null,
                    unit: null,
                    unitPrice: null,
                    count: null,
                    remark: null
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        validNum(rule, value, callback) {
            if (value.toString().length > 10) {
                callback(new Error('最多输入10位'))
            }
            if (value && !isNumberOrDecimals(value)) {
                callback(new Error('请输入数字'))
            } else {
                callback()
            }
        },

        async submitForm() {
            let isValid = false
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    isValid = valid
                }
            })
            return isValid
        }
    }
}
</script>
